<script setup>
import { Expand, Fold } from '@element-plus/icons-vue'

const props = defineProps({
  isActive: Boolean,
})

const emits = defineEmits(['toggleClick'])
const toggleClick = () => emits('toggleClick')
</script>

<template>
  <div @click="toggleClick">
    <el-icon :size="20" class="icon">
      <Fold v-if="props.isActive" />
      <Expand v-else />
    </el-icon>
  </div>
</template>

<style lang="scss" scoped>
.icon {
  color: var(--el-text-color-regular);
  vertical-align: middle;
}
</style>
